<template>
    <div class="message_item_box">
        <div class="message-header">
            <text class="message-header-title">消息通知</text>
        </div>
        <div class="message_item" @click="toOrder">
            <div class="message_item_img">
                <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/message-order.png"
                       style="width:70px;height:70px"></image>
            </div>
            <div class="message_item_content">
                <div>
                    <div class="message_item_tittle_box">
                        <text class="message_item_tittle">订单消息</text>
                    </div>
                    <div class="item_info_content">
                        <text class="meeage_item_info" v-if="messageOrder.msgContent.title">{{messageOrder.msgContent.title}}</text>
                        <text class="meeage_item_info" v-if="!messageOrder.msgContent.title">暂无消息</text>
                    </div>
                </div>
                <div style="display: flex;flex-direction: row;align-items: center">
                    <div class="item_info_number totalColor" v-if="orderCount!=''"><text style="font-size: 24px;color: white;">{{orderCount}}</text></div>
                    <text class="message_item_Icon">&#xe61f;</text>
                </div>
            </div>
        </div>
        <div class="message_item" @click="toLogistics">
            <div class="message_item_img">
                <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/message-logistics.png"
                       style="width:70px;height:70px"></image>
            </div>
            <div class="message_item_content">
                <div>
                    <div class="message_item_tittle_box">
                        <text class="message_item_tittle">物流信息</text>
                    </div>
                    <div class="item_info_content">
                        <text class="meeage_item_info" v-if="logistic.msgContent.title">{{logistic.msgContent.title}}</text>
                        <text class="meeage_item_info" v-if="!logistic.msgContent.title">暂无消息</text>
                    </div>
                </div>
                <div style="display: flex;flex-direction: row;align-items: center">
                    <div class="item_info_number totalColor" v-if="logisticsCount!=''"><text style="font-size: 24px;color: white;">{{logisticsCount}}</text></div>
                    <text class="message_item_Icon">&#xe61f;</text>
                </div>
            </div>

        </div>
        <div class="message_item" @click="toAccount">
            <div class="message_item_img">
                <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/wallet-income.png"
                       style="width:70px;height:70px"></image>
            </div>
            <div class="message_item_content_bottom">
                <div>
                    <div class="message_item_tittle_box">
                        <text class="message_item_tittle">账户消息</text>
                    </div>
                    <div class="item_info_content">
                        <text class="meeage_item_info" v-if="account.msgContent.title">{{account.msgContent.title}}</text>
                        <text class="meeage_item_info" v-if="!account.msgContent.title">暂无消息</text>
                    </div>
                </div>
                <div style="display: flex;flex-direction: row;align-items: center">
                    <div class="item_info_number totalColor" v-if="accountCount!=''"><text style="font-size: 24px;color: white;">{{accountCount}}</text></div>
                    <text class="message_item_Icon">&#xe61f;</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {unReadCount,conversation} from '@/api/msgPush'

    export default {
        data(){
            return{
                orderCount: '',
                logisticsCount: '',
                customerCount: '',
                accountCount: '',
                adminCount: '',
                messageOrder:{
                    msgContent:{
                        title:''
                    }
                },
                logistic:{
                    msgContent:{
                        title:''
                    }
                },
                customer:{
                    msgContent:{
                        title:''
                    }
                },
                admin:{
                    msgContent:{
                        title:''
                    }
                },
                account:{
                    msgContent:{
                        title:''
                    }
                },
            }
        },
        created() {
            this.initIconFont()
            if (this.getGlobalData().token != null){
                this.summaryClick()
                this.loadMessage()
            }
        },
        props:[
            'time'
        ],
        watch:{
            time(val, oldVal){//普通的watch监听
                var _this = this
                if (_this.getGlobalData().token != null){
                    _this.summaryClick()
                    _this.loadMessage()
                }
            },

        },
        methods: {
            toOrder() {
                var _this = this
                if (this.getGlobalData().token == null) {
                    this.loginClick()
                    return;

                }
                eeui.openPage({
                    url: 'root://pages/member/message/order.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false,
                }, result => {
                    if (result.status == 'stop')  {
                        _this.summaryClick()
                        _this.loadMessage()
                    }
                });
            },
            toLogistics() {
                var _this = this
                if (this.getGlobalData().token == null) {
                    this.loginClick()
                    return;

                }
                eeui.openPage({
                    url: 'root://pages/member/message/shipping.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false,
                }, result => {
                    if (result.status == 'stop')  {
                        _this.summaryClick()
                        _this.loadMessage()
                    }
                });
            },
            toAccount() {
                var _this = this
                if (this.getGlobalData().token == null) {
                    this.loginClick()
                    return;

                }
                eeui.openPage({
                    url: 'root://pages/member/message/account.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false,
                }, result => {
                    if (result.status == 'stop')  {
                        _this.summaryClick()
                        _this.loadMessage()
                    }
                });
            },
            summaryClick() {
                unReadCount().then(
                    res => {
                        this.unReads = res.data
                        if (res.data.length > 0) {
                            this.unReads.forEach(item => {
                                switch (item.msg_key) {
                                    case 'msg-order':
                                        this.orderCount = item.msg_num
                                        break;
                                    case 'msg-shipping':
                                        this.logisticsCount = item.msg_num
                                        break;
                                    case 'msg-account':
                                        this.accountCount = item.msg_num
                                        break;
                                    case 'msg-service':
                                        this.customerCount = item.msg_num
                                        break;
                                    case 'msg-notify':
                                        this.adminCount = item.msg_num
                                        break;
                                }
                            })
                        } else {
                            this.orderCount = '';
                            this.logisticsCount = '';
                            this.accountCount = '';
                            this.customerCount = '';
                            this.adminCount = ''
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            //每种消息的最后一条
            //请求出错  查看原因
            loadMessage(){
                 conversation().then(res=>{
                     res.data.forEach(item=>{
                         item.msgContent=JSON.parse(item.msgContent)
                         if(item.msgKey=='msg-order'){
                             this.messageOrder=item
                         }else if(item.msgKey=='msg-shipping'){
                             this.logistic=item
                         }else if(item.msgKey=='msg-account'){
                             this.account=item
                         }else if(item.msgKey=='msg-service'){
                             this.customer=item
                         }else if(item.msgKey=='msg-notify'){
                             this.admin=item
                         }
                     })
                 })
            },
            refreshNumberClick(){
                this.$emit('refreshNumber');
            },
            loginClick() {
                var _this = this
                eeui.openPage({
                    url: 'root://pages/login/msgLogin.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, result => {
                    if (result.status == 'stop') {
                        _this.refreshNumberClick()
                    }
                });
            },
        }
    }
</script>

<style scoped>
    page {
        background-color: rgba(248, 248, 248, 1);
    }

    .tittle_content {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .message_item_box {
        display: flex;
        flex-direction: column;
        background-color: white;
        margin-top: 30px;
        width: 690px;
        margin-left: 30px;
        border-radius: 10px;
        overflow: hidden;

    }

    .message_item {
        width: 690px;
        background-color: rgba(255, 255, 255, 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;

    }

    .message_item_img {
        height: 70px;
        width: 70px;
        margin-left: 27px;
    }

    .message_item_tittle {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .message_item_tittle_box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /*width: 557px;*/
        margin-bottom: 10px;
    }

    .message_item_content {
        margin-left: 23px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(231, 233, 237, 0.5);
        padding-top: 20px;
        padding-bottom: 20px;
        width: 570px;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .message_item_content_bottom {
        margin-left: 23px;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 570px;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .meeage_item_info {
        /*width: 390px;*/
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
    }

    .item_info_content {
        display: flex;
        justify-content: space-between;
    }


    .message-header {
        font-size: 30px;
        position: relative;
        line-height: 80px;
        border-bottom-color: rgba(231, 233, 237, 0.5);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        padding: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .message-header-title {
        font-size: 26px;
    }

    .message_item_Icon {
        font-size: 25px;
        font-family: iconfont2;
        color: rgba(0, 0, 0, 0.2);
        margin-right: 20px;

    }
    .item_info_number {
        width: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:24px;
        color:rgba(255, 255, 255, 1);
        height: 32px;
        border-radius: 50%;
    }
    /* 小圆点 */
    .totalColor{
        background-color: #fc5157
    }
</style>
